<template>
  <div style="height: 350px;" id="mailChartBox">

    <div class="select">
      <el-select v-model="value" placeholder="2019">
        <el-option
          v-for="item in options"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>
    </div>
    <div id="orderChart" style="height: 300px"></div>
  </div>
</template>

<script>
  import {orderCount} from '@/api/customer';
  import {getSum} from '@/util/util';
    export default {
        name: "mail",
        props:['id'],
        data() {
            return {
                options:[2018,2019,2020],
                value:2019,
                orderData:[]
            }
        },
        methods:{
            init() {
                let date = new Date()
                this.value = date.getFullYear()
                this.$nextTick(() => {
                    let width = document.getElementsByClassName('tab')[0].offsetWidth -100
                    document.getElementById('orderChart').style.width = width + 'px'
                    orderCount(this.id,this.value).then(res => {
                        this.orderData = res.data.data;
                        let totalCount = [];
                        let totalAmount = [];
                        let month = [];

                        this.orderData.forEach(value => {
                            totalCount.push(value.totalCount);
                            totalAmount.push(value.totalAmount);
                            month.push(value.month + '月');
                        })

                        let count = totalCount.reduce(getSum);
                        let amount = totalAmount.reduce(getSum);
                        this. drawLine(count,amount, totalCount, totalAmount, month)
                    })
                })
            },
            drawLine(count,amount,totalCount, totalAmount, month) {
                // 基于准备好的dom，初始化echarts实例

                let myChart = this.$echarts.init(document.getElementById('orderChart'))
                // 绘制图表
                let options = {
                    title: {
                        text: '订单',
                        subtext: `近12个月，订单共${count}个，订单总金额${amount}元`
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['订单金额(元)', '订单个数'],
                    },
                    grid: {
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: month,
                    },
                    yAxis: [{
                        type: 'value'
                    }, {
                        type: 'value'
                    }],
                    series: [
                        {
                            name: '订单个数',
                            type: 'line',
                            yAxisIndex: 1,
                            smooth:true,
                            color:'#4572A7',
                            symbol:'none',
                            data: totalCount,
                        },
                        {
                        name: '订单金额(元)',
                        type: 'line',
                        smooth:true,
                        color:'#AB4644',
                        symbol:'none',
                        data: totalAmount,
                    }]
                };
                myChart.setOption(options)

            }
        },
        watch:{
            value() {
                this.init()
            }
        }
    }
</script>

<style scoped>
  .select{
   text-align: right;
  }
</style>
